<template>
    <!-- 菜单弹出框 -->
    <div>
        <el-dialog :title="isAdd ? '添加商品规格' : '修改商品规格'" :visible="isShow" :before-close="offCheck" center>
            <el-form :model="specsInfo" :rules="rules" label-width="100px" class="demo-ruleForm" ref="specsForm">
                <el-form-item label="规格名称" prop="specsname">
                    <el-input v-model="specsInfo.specsname"></el-input>
                </el-form-item>
                <el-form-item label="规格属性" class="attrs" v-for="(item, idx) in attrsList" :key="idx">
                    <el-input v-model="attrsList[idx]"></el-input>
                    <el-button type="success" @click="attrsList.push('')" v-if="idx == 0">新建规格属性</el-button>
                    <el-button type="danger" @click="attrsList.splice(idx, 1)" v-else>删除</el-button>
                </el-form-item>
                <el-form-item label=" 状态">
                    <el-switch v-model="specsInfo.status" active-color="#13ce66" inactive-color="#ccc" :active-value="1"
                        :inactive-value="2">
                    </el-switch>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="offCheck">取 消</el-button>
                <el-button type="primary" @click="addMenu">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
//引入封装好的接口
import { specsAdd, specsInfo, specsEdit } from "../../request/api";
//引入辅助性函数
import { mapGetters, mapActions } from "vuex";
export default {
    // 接受参数
    props: ["isShow", "isAdd"],
    data() {
        return {
            specsInfo: {
                specsname: "",
                attrs: "",
                status: 1
            },
            attrsList: [""],
            rules: {
                specsname: [
                    { required: true, message: '请输入菜单名称', trigger: 'blur' },
                    { min: 2, max: 6, message: '长度在 2 到 6 个字符', trigger: 'blur' }
                ],
            },
        };
    },
    methods: {
        ...mapActions({
            // 调用商品规格列表行动
            getSpecsList: "specs/specsList_Action",
            // 调用获取商品规格总数行动
            getCount: "specs/specsCount_Action"
        }),
        //点击取消
        offCheck() {
            // 子传父
            this.$emit("offCheck", false)
            // 清空表单信息
            this.$refs.specsForm.resetFields()
            this.specsInfo = {
                specsname: "",
                attrs: "",
                status: 1
            }
            this.attrsList = [""]
        },
        // 点击实现数据回显
        getOneSpecs(id) {
            // 调用获取一条数据接口
            specsInfo({ id }).then(res => {
                console.log(res);
                if (res.code == 200) {
                    // 实现数据回显
                    this.specsInfo = {
                        ...res.list[0],
                        id
                    }
                    this.attrsList = res.list[0].attrs
                }
            })
        },
        //点击确定
        addMenu() {
            this.$refs.specsForm.validate(flag => {
                if (flag) {
                    // 将数组转化成字符串拼接的形式
                    this.specsInfo.attrs = this.attrsList.join(",")
                    // 判断是添加还是编辑
                    if (this.isAdd) {
                        //调用添加接口
                        specsAdd(this.specsInfo).then(res => {
                            console.log(res);
                            if (res.code == 200) {
                                this.offCheck()
                                // 重新渲染商品规格总数
                                this.getCount();
                                // 重新渲染当前选中的商品规格列表
                                this.getSpecsList();
                            }
                        })
                    } else {
                        // 调用编辑接口
                        specsEdit(this.specsInfo).then(res => {
                            if (res.code == 200) {
                                this.$message.success(res.msg);
                                this.offCheck()
                                // 重新渲染商品规格总数
                                this.getCount();
                                // 重新渲染当前选中的商品规格列表
                                this.getSpecsList();
                            }
                        })
                    }
                } else {
                    this.$message.error("请输入正确的内容");
                }
            })
        }
    }
};
</script>

<style scoped lang="less">
.attrs {
    .el-input {
        width: 480px;
        margin-right: 10px;
    }
}
</style>
